<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EChart</title>
</head>
<!-- #ee6666 -->
<!-- #5470c6 -->
<body>
    <div id="main" style="width: 600px; height: 450px"></div>

    <script src="../assets/lib/echarts/echarts.min.js"></script>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        const myChart = echarts.init(document.querySelector('#main'));

        // 指定图表的配置项和数据
        const option = {
    color: ["red", "blue"],
    title: {
      text: "薪资折线图",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {},
    // 拖动 类似滚动条
    dataZoom: [
      // {
      //   type: "inside",
      //   start: 0,
      //   end: 10,
      // },
      {
        // 滑块开始的位置
        start: 20,
        // 滑块结束位置
        end: 50,
      },
    ],
    // 工具箱
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: names, // 姓名数组
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value}",
      },
    },
    series: [
      {
        name: "Highest",
        type: "line",
        data: salaries, // 期望薪资
        // 平滑
        smooth: true,
        // 设置图例 实心圆
        symbol: "circle",
        // color: "red",
      },
      {
        name: "Lowest",
        type: "line",
        data: trueSalaries, // 真实薪资
        // 平滑
        smooth: true,
        // 设置图例 实心圆
        symbol: "circle",
        // color: "blue",
      },
    ],
  };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>